<template>
  <div class="my-nav">
    <el-menu
        :router="true"
        style="padding:0 30px; text-align: center;letter-spacing: 1px;"
        text-color="#4a85dd"
        mode="horizontal"
       >
      <el-menu-item index = "0" disabled style="opacity: 1;cursor: default" >
        <el-image :src=logoImg style="padding-top:5px; width: 45px;"></el-image>
      </el-menu-item>
      <el-menu-item disabled style="width: 200px;cursor: default;"></el-menu-item>
      <el-menu-item class="nav-font" index="home">

        <span>
          <i class="el-icon-s-home nav-icon"></i>首页
        </span>
      </el-menu-item>

      <el-menu-item class="nav-font" index="atlas" >

        <i class="el-icon-collection nav-icon"></i>图集
      </el-menu-item>
      <el-menu-item class="nav-font" index="4">
       <span>
          <i class="el-icon-link nav-icon" ></i>友链
       </span>
      </el-menu-item>
      <el-menu-item index="5" disabled style="opacity: 1; ">
        <el-input  placeholder="请输入搜索内容" v-model="search" class="input-with-select" style="width:120%;">

          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </el-menu-item>

      <el-menu-item index="login" style="float:right;color:#0078d4;" v-if="!userFlag">
        <span class="login-button" >
          LG
        </span>
      </el-menu-item>

      <span style="display:inline-block;float:right;height:65px;line-height: 65px;" v-else>
<!--        用户操作-->
         <el-dropdown @command="handleCommand">
           <span>
             <i class="el-icon-s-custom" style="margin-right: 5px"></i>
             用户
           </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="user">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
         </el-dropdown>

      </span>
    </el-menu>
  </div>
</template>

<script>


import { reqLogout} from "@/API";

export default {
  name: 'HeaderCom',
  data(){
    return {
        //img
      logoImg:require("@/assets/img/logo.png"),
      //search
      search:"",
      userFlag: 0,
      //文章分页信息
      pageNum:1,
      pageSize:6,
    }
  },
  created() {
//判断显示
    if(localStorage.getItem("pole_time_not") != null){
      this.isShowUser()

    }
  },
  methods:{
    //search
    handleSearch(){
      if(this.search === ''){
        this.$message.info("输入为空")
      }else{
        // this.$message.info(this.search)

      //  按需查询文章信息
        localStorage.setItem("pole_article_search",this.search)
        if(this.$route.path === "/article"){

            location.reload();
        }else{
          this.$router.push({
            path:"/article"
          })
        }

      }
    },
//用户操作
    handleCommand(command){
      if(command === 'logout'){
          reqLogout().then((res)=>{
            if(res.status === 200){
              localStorage.removeItem("pole_time_not")

              if(localStorage.getItem("pole_article_search")){
                localStorage.removeItem("pole_article_search")
              }
              if(localStorage.getItem("pole_item_info")){
                localStorage.removeItem("pole_item_info")
              }

              //判断显示
              if(localStorage.getItem("pole_time_not") != null){
                this.userFlag = 1
              }else{
                this.userFlag = 0
              }
              this.$router.push("login")
            } else
              this.$message.error(res.message)
          })
      }else{
        // this.$message.info("个人中心")

      //  跳转页面
        this.$router.push({ path: '/userInfo', params: { username: 'eduardo' } })
      }


    },
    //是否显示登录选项
    isShowUser(){
      this.userFlag = 1
    },
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
/* 导航栏样式*/
.my-nav{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.login-button{
  display: inline-block;
  width:50px;
  height:35px;
  line-height: 35px;
  border: 1px solid #0188fb;
  border-radius: 15px;
}
.login-button:hover{
  color: white;
  background-color: #0188fb;

}
.nav-font{
  color: black!important;
  font-size: 17px;
}
.el-menu--horizontal>.el-menu-item.is-active{
  color:#1bb6e2!important;
}
.nav-icon{
  position: relative;
  top:-2px;
  left: 8px;
}
</style>
